<!--
 * @Author: your name
 * @Date: 2020-10-13 09:11:50
 * @LastEditTime: 2021-02-25 16:48:05
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \nuxt-iview\components\Navbar.vue
-->
<template>
  <div class="isFixed" :class="{shadow: isFixed}">
      <div class="NavbarWapper" id="NavbarWapper">
        <div class="s2">
          <nuxt-link to="/" class="NavbarWapper_logo">
            <img class="img" v-lazy="require('~/assets/image/shoose5-2-__04.jpg')" alt="">
          </nuxt-link>
        </div>
        <div class="s7">
          <ul class="NavbarWapper_title">
            <li class="li" v-for="(item, index) of menuNav" :key="'item' + index" @mouseenter="showLayer(index, item.children)" @mouseleave="showLayer()">
              <nuxt-link class="li_link ptb10" :to="item.path">{{$t(item.name)}}</nuxt-link>
            </li>
            <li class="li" @mouseenter="showLayer(2)" @mouseleave="showLayer()">
              <nuxt-link class="li_link ptb10" to="/collections">{{$t('Collections')}}</nuxt-link>
            </li>
            <li class="li">
              <nuxt-link class="li_link ptb10" to="/brand-story">{{$t("About")}}</nuxt-link>
            </li>
          </ul>
        </div>
        <div class="s3">
          <ul class="NavbarWapper_right">
            <li class="li ptb10">
              <i class="iconfont icon-sousuo" @click="isSearch()"></i>
              <div class="search">
                  <input type="text" class="search_input" :class="{active: isShoWSearch, noActive: !isShoWSearch}" v-model="searchVal" />
              </div>
            </li>
            <li class="li ptb10">
              <nuxt-link to="/">
                <i class="iconfont icon-aixin1"></i>
                <span class="gwc_num">({{favouritesNum()}})</span>
              </nuxt-link>
            </li>
            <li class="li ptb10">
              <nuxt-link to="/">
                <i class="iconfont icon-gwc"></i>
                <span class="gwc_num">({{cartNum()}})</span>
              </nuxt-link>
            </li>
            <li class="li">
              <nuxt-link to="/login" v-if="!isToken()" class="sign li_link ptb10">{{$t('home.Sign')}}</nuxt-link>
              <a href="javascript:;" @click="logout()" v-else class="sign li_link ptb10">{{$t('home.SignOut')}}</a>
            </li>
            <li class="li help_txt">
              <nuxt-link to="/help" class="help li_link ptb10">{{$t('home.Help')}}</nuxt-link>
              <ul class="nav-help-contact absolute plr10 spacing">
                <li class="ptb10 plr10 nav-help-li pt10"><a href="javascript:;" class="size16 gradients">{{$t("Order Tracking")}}</a></li>
                <li class="ptb10 plr10 nav-help-li nav-help-ship mb10"><nuxt-link class="size16 gradients" to="/about-us">{{$t("Shipping")}} &amp; {{$t("Returns")}}</nuxt-link></li>
                <li class="plr10 size18 nav-help-li b ptb5">(888)7801885</li>
                <li class="plr10 size14 nav-help-li b mb10 ptb5">Mon-Fri 9am-5pm EST</li>
                <li class="ptb10 plr10 nav-help-li"><img :src="require('~/assets/image/common/help_2.png')" class="mr30" alt=""><a href="javascript:;" class="size16 gradients" id="emailUs">{{$t("Email Us")}}</a></li>
                <li class="ptb10 plr10 nav-help-li mb10"><img :src="require('~/assets/image/common/help_1.png')" class="mr30" alt=""><a href="javascript:;" class="size16 gradients">{{$t("Live Chat")}}</a></li>
                <li><nuxt-link to="/help" class="block size20 b nav-help-btn ptb10 text_c gradients">{{$t("Check FAQ")}}</nuxt-link></li>
              </ul>
            </li>
          </ul>
        </div>
        <div :class="{floatActive: currentIndex !== -1}" class="floatLayer">
          <ul class="w1200auto">
            <li v-show="currentIndex === 0" class="floatLayer_box ptb20 plr20 spacing" @mouseenter="showLayer(0)" @mouseleave="showLayer()">
              <div class="li s6" v-for="(child, index) of childrenItem" :key="'child' + index">
                <nuxt-link :to="{name: 'eyeglasseslist', query: {page: `eyeglasses-${child.name}`, sex: isSex(child.custom_attributes)}}" class="li_link">
                  <!-- <img :src="require('~/assets/image/testglasses.png')" alt="" class="img"> -->
                  <img v-lazy="childImg(child.custom_attributes)" alt="" class="img">
                </nuxt-link>
                <nuxt-link :to="{name: 'eyeglasseslist', query: {page: `eyeglasses-${child.name}`, sex: isSex(child.custom_attributes)}}" class="li_title size15 b gradients">{{$t(child.name)}}</nuxt-link>
              </div>
            </li>
            <!-- <li v-show="currentIndex === 1" class="floatLayer_box ptb20 plr20 spacing" @mouseenter="showLayer(1)" @mouseleave="showLayer()">
              <div class="li" v-for="(child, index) of childrenItem" :key="'child' + index">
                <nuxt-link :to="{name: 'commonlist', query: {page: `sunglasses-${child.name}`, sex: isSex(child.custom_attributes)}}" class="li_link">
                  <img v-lazy="childImg(child.custom_attributes)" alt="" class="img">
                </nuxt-link>
                <nuxt-link :to="{name: 'commonlist', query: {page: `sunglasses-${child.name}`, sex: isSex(child.custom_attributes)}}" class="li_title size15 b gradients">{{$t(child.name)}}</nuxt-link>
              </div>
            </li> -->
            <li v-show="currentIndex === 1" class="floatLayer_box pt20" @mouseenter="showLayer(1)" @mouseleave="showLayer()">
              <div class="h100 deal_right flex">
                <div class="deal_img mr50">
                    <img class="mb20" :src="require('@/assets/image/navbar/deals_1.png')" alt="">
                    <div class="text_c"><nuxt-link to="/deals/coupons" class="size14 b gradients">{{$t('Coupons')}}</nuxt-link></div>
                </div>
                <div class="deal_img mr50">
                    <img class="mb20" :src="require('@/assets/image/navbar/deals_2.png')" alt="">
                    <div class="text_c"><nuxt-link to="/deals/clearance" class="size14 b gradients">{{$t('On sales')}}</nuxt-link></div>
                </div>
                <div class="deal_img">
                    <img class="mb20" :src="require('@/assets/image/navbar/deals_3.png')" alt="">
                    <div class="text_c"><nuxt-link to="/deals/buy-one-get-one-free" class="size14 b gradients">{{$t('Buy one get one free')}}</nuxt-link></div>
                </div>
              </div>
            </li> 
            <li v-show="currentIndex === 2" class="floatLayer_box" @mouseenter="showLayer(2)" @mouseleave="showLayer()">
              <div class="h100 spacing ptb10 mr30 collection_left">
                    <div class="mb20"><nuxt-link class="size14 b gradients" to="/collections/progressive-glasses">{{$t('Progressive glasses')}}</nuxt-link></div>
                    <div class="mb20"><nuxt-link class="size14 b gradients" to="/collections/prescription-sunglasses">{{$t('Prescription sunglasses')}}</nuxt-link></div>
                    <div class="mb20"><nuxt-link class="size14 b gradients" to="/collections/photochromic">{{$t('Photochromic')}}</nuxt-link></div>
                    <div class="mb20"><nuxt-link class="size14 b gradients" to="/collections/sports-glasses">{{$t('Sports Glasses')}}</nuxt-link></div>
                </div>
                <div class="h100 collection_right flex" style="border-left: 1px solid #ddd;">
                    <div class="collection_img pl45">
                        <img class="" :src="require('@/assets/image/navbar/collection_1.png')" alt="">
                        <div class="text_c ptb10"><nuxt-link to="/collections/protective-goggles" class="size14 b gradients">{{$t('Protective Goggles')}}</nuxt-link></div>
                    </div>
                    <div class="collection_img pl45">
                        <img class="" :src="require('@/assets/image/navbar/collection_2.png')" alt="">
                        <div class="text_c ptb10"><nuxt-link to="/collections/polarized-glasses" class="size14 b gradients">{{$t('Polarized Glasses')}}</nuxt-link></div>
                    </div>
                    <div class="collection_img pl45">
                        <img class="" :src="require('@/assets/image/navbar/collection_3.png')" alt="">
                        <div class="text_c ptb10"><nuxt-link :to="{path: '/collections/lenses', query: { id: 0 }}" class="size14 b gradients">{{$t('Lenses')}}</nuxt-link></div>
                    </div>
                </div> 
            </li>
          </ul>
        </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapGetters } from 'vuex';
import config from '@/config/index';

export default {
  asyncData() {
    return {
    }
  },
  data() {
    return {
      isFixed: false,
      isShoWSearch: false, // 是否显示搜索
      searchVal: '' // 搜索关键字
      ,currentIndex: -1
      ,imgIndex: 0,
      childrenItem: [], // 子目录
      baseUrl: config.baseUrl
    }
  },
  computed: {
    // ...mapState({
    //   cartNum: state => state.content.cartNum,
    //   favouritesNum: state => state.content.favouritesNum,
    //   token: state => state.content.token,
    // }),
    ...mapGetters('content', [
      'cartNum',
      'favouritesNum',
      'isToken'
    ]),
    menuNav() {
      return this.$store.state.content.menu
    },
    childImg() {
      return function(attrArr) {
        let image = attrArr.filter((ele, index) => {
          return ele.attribute_code === 'image'
        })
        return config.baseUrl + image[0].value
      }
    },
    isSex() {
      return function(attrArr) {
        let sex = attrArr.filter((ele, index) => {
          return ele.attribute_code === 'url_key'
        })
        return sex[0].value === 'shop-men' ? 1 : 0
      }
    }
  },
  methods: {
    /**
     *@param: index >> 索引
     *@description: 切换图片
     *@author: Mister Wang
     *@date: 2020-12-09 08:58:33
    */
    changeImg(index){
      this.imgIndex = index;
    },
    /**
     *@param: 
     *@description: 路由跳转
     *@author: Mister Wang
     *@date: 2020-12-08 14:59:37
    */
    goRoute(route, index) {
      let routes = route.replace(new RegExp(" ", "gm"), '').toLowerCase();
      console.log('routes :>> ', routes);
      this.$router.push({name: routes.toLowerCase(), query: { page: 'deals-' + routes }});
      // switch (index) {
      //   case 0:
      //     this.$router.push({name: route, query: { page: 'deals-' + route }});
      //     break;
      //   case 1:
      //     this.$router.push({name: route, query: { page: 'deals-' + route }});
      //     break;         
      //   case 2:
      //     this.$router.push({name: route, query: { page: 'deals-' + route }});
      //     break;
      // }
      this.currentIndex = -1;
    },
    /**
     *@param: 
     *@description: 显示菜单层
     *@author: Mister Wang
     *@date: 2020-12-08 11:37:45
    */
    showLayer(index, children) {
      if(index || index === 0) {
        this.currentIndex = index;
        if(children && children.length) {
          this.childrenItem = children;
        }
      } else {
        this.currentIndex = -1
      }
    },
    ...mapMutations('content', ['SET_LOGOUT']),
    isSearch() {
      if (this.isShoWSearch && this.searchVal.trim()) {
        console.log('发起搜索请求 :>> ', this.searchVal);
      } else if (this.isShoWSearch && !this.searchVal.trim()) {
        this.isShoWSearch = false;
      } else if (!this.isShoWSearch) {
        this.isShoWSearch = true;
      }
    },
    handleScroll() {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; // 滚动条偏移量
      let offsetTop = document.querySelector('#NavbarWapper').offsetTop;  // 要滚动到顶部吸附的元素的偏移量
      this.isFixed = scrollTop > offsetTop ? true : false;  // 如果滚动到顶部了，this.isFixed就为true
    },
    logout() {
      // this.$store.commit('SET_LOGOUT');
      this.SET_LOGOUT();
      this.$router.push('/')
    }
  },
  mounted() {
    window.addEventListener('scroll',this.handleScroll);
  }
}
</script>
<style lang="scss" scoped>
@import '~/assets/scss/index.scss';

.NavbarWapper {
  position: relative;
  max-width:1200px;
  margin:0 auto;
  height: 90px;
  background: #fff;
  display: flex;
}
.NavbarWapper_logo {
  @include flex-center(center);
  height: $s100;
  .img {
    width: $s100;
  }
}
.NavbarWapper_title {
  @include flex-center(flex-start);
  height: $s100;
  .li {
    @include flex-center();
    font-size: 16px;
    font-weight: bold;
    height: $s100;
    margin: 0 15px;
    &_link {
      @include flex-center();
      position: relative;
    }
    &_link:hover::after {
      left: 0;
      width: 100%;
    }
    &_link::after {
      pointer-events: none;
      content: "";
      position: absolute;
      left: 50%;
      width: 0;
      bottom: 0;
      height: 2px;
      background: $theme;
      -webkit-transition: .2s;
      transition: .2s;      
    }
  }
}
.NavbarWapper_right {
  @include flex-center();
  height: $s100;
  .li {
    position: relative;
    .search {
      position: absolute;
      right: -5px;
      top: 5px;
      z-index: 0;
      box-sizing: border-box;
      &_input {
        line-height: unset;
        box-sizing: border-box;
        width: 0px;
        height: 28px;
      }
    }
  }
  .help,
  .sign {
    font-size: 16px;
    font-weight: bold;
    color: $c333;
    &:hover {
      color: $c666;
    }
  }
  .iconfont {
    position: relative;
    z-index: 999;
    font-weight: bold;
    cursor: pointer;
  }
  .gwc_num {
    position: absolute;
    right: -16px;
    top: 5px;
    font-size: 12px;
  }
}
.nav-help-contact {
  overflow: hidden;
  top: 51px;
  right: 0;
  z-index: 99;
  background: $cfff;
  height: 0;
  transition: all .5s;
  width: 280px;
  border: unset;
}
.help_txt:hover .nav-help-contact {
  height: 300px;
  transition: all .5s;
  border: 1px solid $ddd;
}
.nav-help-li {
  @include flex-center(center);
}
.nav-help-ship {
  border-bottom: 1px solid $ddd;
}
.nav-help-btn {
  background: $theme;
  border-radius: 5px;
  color: $cfff;
}
.active {
  width: 150px !important;
  transition: width .5s; 
  padding: 5px;
  border: 1px solid $ddd;
  border-radius: 5px;
}
.noActive {
  width: 0px;
  transition: width, border, .5s;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 0;
}
.isFixed {
  position: fixed;
  left:0;
  top: 0;
  width: 100%;
  z-index: 99;
  background: #fff;
}
.shadow {
  box-shadow: 0 0 3px $c666;
}
.floatLayer {
  position: fixed;
  left:0;
  top: 120px;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: all .5s;
  z-index: 9;
  background: $cfff;
  border: 1px solid rgba(3,3,3,.1);
  &_box {
    @include flex-center(space-around);
    height: 250px;
    .li {
      @include flex(column);
      justify-content: center;  
      align-items: center;
    }
    .deals_pic {
      height: $s100;
      .img {
        display: none;
        left: 0;
        top: 0;
        width: $s100;
        height: $s100;
      }
    }
    .deals_box {
      @include flex(column);
      justify-content: space-around;
      height: $s100;
    }
  }
  .deal_img,
  .collection_left,
  .collection_img {
    @include flex(column);
  }
  .collection_img {
    justify-content: flex-end;
  }
  .deal_img,
  .collection_left {
    justify-content: center;
  }
}
.floatActive {
  top: 90px;
  opacity: 1; 
  visibility: unset;
}
</style>